<template>
    <div>
         <Breadcrumb :style="{margin: '10px 0'}">
            <Input search enter-button placeholder="Enter something..." style="width:300px" @on-search="search" v-model="keywords"/>                       
        </Breadcrumb>
       <div style="position:absolute;right:60px;z-index:999;top:106px">
            <Button  type="primary" @click="dataModal = true">添加</Button>
            <Button  type="error" @click="removes" >批量删除</Button>
       </div>
           
        
        <Table border :columns="columns7" :data="listData" style="margin-top:10px" @on-select="onSelect" ></Table>
        <Page :total="total" size="small" show-elevator show-sizer style="float:right;padding-top:10px" @on-change ="onChagePage" @on-page-size-change="onPageSizeChange"/>


        <Modal
            v-model="dataModal"
            title="数据处理"
            @on-ok="ok"
            @on-cancel="cancel">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
              <FormItem label="ID" prop="_id" style="opacity:0">
                    <Input v-model="formValidate._id" placeholder=""></Input>
                </FormItem>
                <FormItem label="订单ID" prop="num">
                    <Input v-model="formValidate.num" placeholder="Enter  num"></Input>
                </FormItem>               
                <FormItem label="会员" prop="name">
                    <Input v-model="formValidate.name" placeholder="Enter  name"></Input>
                </FormItem>
                <FormItem label="状态" prop="state">
                    <Select v-model="formValidate.state" placeholder="Select state">
                        <Option value="完成">完成</Option>
                        <Option value="处理中">处理中</Option>
                        <Option value="呆滞">呆滞</Option>
                        <Option value="预警">预警</Option>
                    </Select>
                </FormItem>
                <FormItem label="单品小计" prop="count">
                    <Input v-model="formValidate.count" placeholder="Enter  count"></Input>
                </FormItem>
                <FormItem label="添加日期" prop="date">
                   <Input v-model="formValidate.date" placeholder="Enter  date"></Input>
                </FormItem>
                <FormItem label="修改日期" prop="time">
                   <Input v-model="formValidate.time" placeholder="Enter  time"></Input>
                </FormItem>
                           
            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
            </FormItem>
        </Form>
        </Modal>
       <Drawer :closable="false" width="640" v-model="showData" >
            <p :style="pStyle" style="margin-bottom:20px;font-weight:700">订单详情</p>
            <Table :columns="columns8" :data="data7" size="large" ref="table"  stripe="true"></Table>
            <p :style="pStyle" style="margin-bottom:20px;font-weight:700;margin-top:80px">用户信息</p>
            <!-- <div class="demo-drawer-profile">
                <Row>
                    <Col span="12">
                        会员：
                    </Col>
                    <Col span="12">
                        会员等级：
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        联系方式：
                    </Col>
                </Row>               
            </div>                    -->
            <Table :columns="columns9" :data="data8" size="large" ref="table"  stripe="true"></Table>
      </Drawer>
   </div>
</template>
<script>
export default {
  data() {
    return {
      pStyle: {
        fontSize: "16px",
        color: "rgba(0,0,0,0.85)",
        lineHeight: "24px",
        display: "block",
        marginBottom: "16px"
      },
      formValidate: {
        _id: null,
        num: "",
        name: "",
        state: "",
        count: "",
        date: "",
        time: ""
      },
      ruleValidate: {
        num: [
          {
            required: true
          }
        ],
        name: [
          {
            required: true
          }
        ],
        state: [
          {
            requird: true
          }
        ],
        count: [
          {
            required: true
          }
        ],
        date: [
          {
            required: true
          }
        ],
        time: [{ required: true }]
      },
      columns8: [
        {
          title: "订单编号",
          key: "id",
          width: 100,
          align:"center"
        },
        {
          title: "商品",
          key: "product",
          width: 100,
          align:"center"
        },
        {
          title: "型号",
          key: "model",
          width: 100,
           align:"center"     
        },
        {
          title: "原价",
          key: "preprice",
          width: 100,
         align:"center"
        },
        {
          title: "现价",
          key: "price",
          width: 100,
        align:"center"
        },
        {
          title: "总数量",
          key: "countnum",
          width: 100,
         align:"center"
          
        },
        {
          title: "总价",
          key: "countprice",
          width: 100,
         align:"center"
        
        }       
      ],
      data7: [
        {
          id: 7302,
          product: "欧式沙发",          
          model: "1201",
          preprice: "1563",
          price: "1028",
          countnum: "1",
          countprice: "1028",
        }
      ],
      columns9: [
        {
          title: "会员编号",
          key: "ID",
          width: 100,
          align:"center"
          
        },
        {
          title: "会员",
          key: "name",
          width: 80,
          align:"center"
          
        },
        {
          title: "会员级别",
          key: "level",
          width: 140,
          align:"center"
        },
        {
          title: "邮箱",
          key: "mail",
          width: 150,
           align:"center"     
        },
        {
          title: "手机号",
          key: "phone",
          width: 160,
         align:"center"
        },
        {
          title: "地址",
          key: "address",
          width:300,
          align:"center"
        }       
      ],
      data8: [
        {
          ID:"012",
          name: "李娜",
          level: "普通会员",          
          mail: "123@qq.com",
          phone: "15957145323",
          address: "浙江省杭州市江干区"
         
        }
      ],
      columns7: [
        {
          type: "selection",
          width: 50
        },
        {
          title: "订单ID",
          key: "num",
          align: "center"
        },
        {
          title: "会员",
          key: "name",
          align: "center",
          width: 100
        },
        {
          title: "状态",
          key: "state",
          align: "center"
        },
        {
          title: "单品小计",
          key: "count",
          align: "center"
        },
        {
          title: "添加日期",
          key: "date",
          align: "center"
        },
        {
          title: "修改日期",
          key: "time",
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          // width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.row._id);
                    }
                  }
                },
                "查看"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params.row._id);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      //console.log(params);
                      this.remove(params.row._id);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      listData: [],
      page: 1,
      limit: 10,
      total: 0,
      keywords: "",
      dataModal: false,
      showData: false,
      ids: [],
      selections: null
    };
  },
  methods: {
    show(id) {
      this.axios({
        url: `http://localhost:3000/sales/data/${id}`,
        method: "get"
      }).then(res => {
        console.log(res);
        this.showData = true;
      });
    },
    edit(id) {
      this.axios({
        url: `http://localhost:3000/sales/data/${id}`,
        method: "get"
      }).then(res => {
        this.formValidate = res.data;
        this.dataModal = true;
      });
    },
    remove(id) {
      this.$Modal.confirm({
        title: "确认删除",
        content: "<p>你确认删除记录吗？</p>",
        onOk: () => {
          this.axios({
            url: `http://localhost:3000/sales/data/${id}`,
            method: "delete"
          }).then(res => {
            // console.log(res);
            this.getList();
          });
        }
      });
    },
    removes() {
      this.$Modal.confirm({
        //确认删除对话框
        title: "确认删除",
        content: "<p>你确认删除选中数据？</p>",
        onOk: () => {
          //console.log(111)
          for (let i = 0; i < this.selections.length; i++) {
            this.ids.push(this.selections[i]._id);
          }
          //console.log(this.ids.toString());
          this.axios({
            method: "delete",
            url: `http://localhost:3000/sales/removes`,
            data: {
              ids: this.ids
            }
          }).then(res => {
            // console.log(res);
            this.getList(this.page);
          });
        }
      });
    },
    getList(page) {
      this.axios({
        url: `http://localhost:3000/sales/list/?page=${this.page}&limit=${
          this.limit
        }&name=${this.keywords}`,
        method: "post",
        data: {
          page: page,
          name: this.name
        }
      }).then(res => {
        //console.log(res);
        this.total = res.data.total;
        this.listData = res.data.rows;
      });
    },
    onChagePage(page) {
      // console.log(page);
      this.page = page;
      this.getList(page);
    },
    onPageSizeChange(pageSize) {
      //console.log(pageSize);
      this.limits = pageSize;
      this.getList();
    },
    search(value) {
      this.name = value;
      this.getList();
    },
    ok() {
      //this.formValidate = this.InitformValidate;
      this.$Message.info("Clicked ok");
    },
    cancel() {
      // this.formValidate = this.InitformValidate;
      this.$Message.info("Clicked cancel");
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.formValidate._id !== null) {
            this.axios({
              url: `http://localhost:3000/sales/data/${this.formValidate._id}`,
              method: "put",
              data: this.formValidate
            }).then(res => {
              this.dataModal = false;
              this.getList(this.page);
              this.formValidate._id = null;
              this.handleReset(name);
              // Object.assign(this.$data, this.$options.data());
              this.$Message.success("Success!");
            });
          } else {
            delete this.formValidate._id;

            //Object.assign(this.$data, this.$options.data());
            this.axios({
              url: "http://localhost:3000/sales/data",
              method: "post",
              data: this.formValidate
            }).then(res => {
              this.dataModal = false;
              this.getList(this.page);
              this.formValidate._id = null;
              this.$Message.success("Success!");
              this.handleReset(name);
            });
          }
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    onSelect(selection, row) {
      this.selections = selection;
      console.log(this.selections);
    }
  },

  mounted() {
    this.getList();
  }
};
</script>